@charset "utf-8";

@import "xxPublic";   //引入公共样式

.headerBox{
    @include flex;
    line-height: 2.6rem;
    background: $btnred;
    padding: 0.8rem 1.5rem;
    .iconfont{
        font-size: 1.8rem;
    }
    div{
        flex: 1;
        margin-right: 1rem;
        @include flex;
        background: $cf0;
        border-radius: 4px;
        padding: 0 1rem;
        i{
            color: $gray;
        }
        input{
            border: none;
            background: none;
            flex: 1;
            outline: none;
        }
    }
    a{
        text-align: center;
        color: $gray;
    }
}
.slideBox{
    position: relative;
    @include mb10;
    .hd{
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 33;
        li{
            float: left;
            width: 1.6rem; height: 0.2rem;
            margin-left: 1rem;
            background: rgba(255,255,255,0.6);
            text-indent: -9999px;
            &.on{
                background: rgba(255,255,255,1);
            }
        }
    }
    .bd{
        img{
            width: 100%;
            height: 12rem;
        }
    }
}
.miaobox{
    background: white;
    padding: 1rem 0;
    margin-bottom: 1rem;
}
.miaokill{
    @include flex;
    justify-content: space-between;
    @include mb10;
    padding: 0 0.6rem;
    .killTitle{
        img{
            width: 2rem;
        }
        color:$red;
    }
}
.swiper-container1{
    .swiper-slide {
        text-align: center;
        background: #f6f6f6;
        width: 28%;
        padding: 1rem;
        img{
                width: 100%;
            }
        div{
            @include flex;
            text-align: left;
            span{
                @include flexcell;
                color: $red;
                font-size: 1.5rem;
            }
            p{
                color: $gray;
                font-size: 1.2rem;
            }
        }
            
    }
}
.swiper-container2{
    background: white;
    padding: 1rem 0;
    .swiper-slide{
        width: 20%;
        float: left;
        text-align: center;
        @include mb10;
    }
    .swiper-pagination-bullet{
        width: 15px;
        height: 4px;
        border-radius: 10px;
    }
    .swiper-pagination-bullet-active{
        background: $borderColor;
    }
}
.menubox{
    background: white;
    overflow: hidden;
    position: relative;
    padding: 1rem 0;
    .menuhd{
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
        li{
            width: 5px; height: 5px;
            float: left;
            margin-right: 0.5rem;
            border-radius: 100%;
            background: $gray;
            &.on{
                background: #333333;
            }
        }
    }
    .menubd ul{
        overflow: hidden;
        flex-wrap: wrap;
        width: 100%;
        li{
            width: 20%;
            float: left;
            text-align: center;
            @include mb10;
        }
    }
    
}

//内容部分
.pTxt{
//  text-align: center;
//  line-height: 4rem;
//  font-size: 1.6rem;
//  letter-spacing: 0.5em;
//  &.orange{
//      color: $orange;
//  }
//  &.purple{
//      color:$purple;
//  }
//  &.blue{
//      color:$blue;
//  }
    padding:1rem;
}
.conDiv{
    @include flex;
    background: white;
    flex-wrap: wrap;
    div{
        width: 25%;
        border-left: 1px solid #f0f0f0;
        margin-left: -1px;
        &:nth-child(1){
            width: 50%;
        }
        &:nth-child(4){
            width: 50%;
        }
        img{
            width: 100%;
        }
        p{
            em{
                font-size: 1.6rem;
                display: block;
                &.blue{
                    color: #4debeb;
                }
                &.orange{
                    color: $orange;
                }
                &.rouse{
                    color: #ff57c6;
                }
            }
        }
    }
}
.brandDiv{
    div:nth-child(2),div:nth-child(3){
        width: 50%;
    }
}
//为你推荐-首页
.recommendList{
    @include flex;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    img{
        width: 100%;
    }
    li{
        width: 45%;
        background: white;
        font-size: 1.4rem;
        padding: 1.2rem 2%;
        span{
            display: block;
            height: 4.4rem;
            line-height: 2rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        em{
            font-size: 1.5rem;
            color: $red;
        }
    }
    li:nth-child(odd){
        margin-right: 1%;
    }
    li:nth-child(even){
        margin-left: 1%;
    }
}

//线下服务模块
.offlineBox{
    @include flex;
    background: white;
    .offline-left{
        flex: 1;
        ul{
            background: #f2f2f2;
            text-align: center;
            overflow-y: scroll;
            li{
                border-left: 4px solid #F2F2F2;
                height: 5rem;
                line-height: 5rem;
                padding-bottom: 2px;
                &.active{
                    background: white;
                    border-left-color: $btnred;
                    span{
                        border-bottom-color: white;
                    }
                }
                span{
                    border-bottom: 1px solid $borderColor;
                    display: inline-block;
                    padding: 0 0.5rem;
                }
            }
        }
    }
    .offline-right{
        flex: 3;
        
    }
}
.offlineConlists li a{
    @include flex;
    border-bottom: 1px solid $borderColor;
    margin-bottom: -1px;
    .leftbox{
            flex: 2;
            padding: 1rem 0.6rem;
            img{
                width: 100%;
            }
        }
    .rightbox{
            flex: 3;
            @include flex;
            align-content: space-around;
            flex-wrap: wrap;
            padding: 1rem 0;
            div{
                width: 100%;
            }
            span{
                display: block;
                color: $bigTitle;
                margin-bottom: 0.3rem;
            }
            p{
                font-size: 1.2rem;
                color: $smallTitle;
            }
            em{
                color: $btnred;
            }
            dl{
                @include flex;
                align-content: space-around;
                color: $txtcolor;
                font-size: 1rem;
                dd{
                    flex: 1;
                }
            }
    }
}

//收藏页面
.colleHd{
    @include flex;
    text-align: center;
    background: white;
    border-bottom: 1px solid $borderColor;
    li{
        flex: 1;
        position: relative;
        em{
            position: absolute;
            right: 0;
            top: 30%;
            height: 40%;
            width: 1px;
            display: block;
            background: $borderColor;
        }
        span{
            border-bottom: 1px solid transparent;
            padding: 1rem 0.4rem;
            display: inline-block;
            
        }
        &.active{
            color: $red;
            span{
                border-bottom-color: $red;
            }
        }
    }
    li:first-child{
        border: none;
    }
}

.nonBox{
    margin: 6rem 0;
    color: $txtcolor;
    img{
        width: 20%;
        margin-bottom: 1.5rem;
    }
}
.ggBtn{
    background: $red;
    color: white;
    width: 50%;
    border: none;
    outline: none;
    height: 3.5rem;
    border-radius: 4px;
}
.haveBlank{
    background: white;
    li{
        border-bottom: 1px solid $borderColor;
        padding: 2rem 1rem;
        a{
        @include flex;
        align-items: center;
        div{
            flex: 1;
            span{
                padding: 0 1rem;
                background: $cf5;
                border-radius: 20px;
                margin-right: 1rem;
                font-size: 1.2rem;
                em{
                    color: $red;
                }
            }
            i{
                font-size: 1.6rem;
                font-family: simsun;
            }
        }
        }
    }
}
.haveGoods{
    @include flex;
    flex-wrap: wrap;
    margin-top: 1rem;
    li{
        width: 47%;
        margin-left: 2%;
        margin-bottom: 1rem;
        background: white;
        padding-bottom: 0.4rem;
        .goodsTit{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}
.goodsTit{
    padding: 0 0.5rem;
    color: $bigTitle;
    margin-bottom: 0.4rem;
}
.pinglun{
    padding: 0 0.5rem;
    margin-bottom: 0.4rem;
    span{
        color: $txtcolor;
        font-size: 1.2rem;
        background: $cf5;
        padding: 0 0.6rem;
        border-radius: 10px;
    }
}
.price{
    @include flex;
    padding: 0 0.5rem;
    em{
        flex: 3;
        color: $btnred;
        font-size: 1.6rem;
    }
    button{
        flex: 2;
        background: $btnred;
        color: white;
        font-size: 1.3rem;
//      padding: 0 0.4rem;
        border-radius: 4px;
        border: none;
        outline: none;
    }
}
.haveBrowse{
    li{
        background: white;
        padding: 1rem;
        border-bottom: 1px solid $borderColor;
        a{
            @include flex;
            .browseImg{
                flex: 1;
                img{
                    width: 100%;
                }
            }
            .browserDiv{
                flex: 2;
                @include flex;
                justify-content: space-around;
                flex-wrap: wrap;
                div{
                    width: 100%;
                }
                .price{
                    align-items: center;
                    input{
                        background: $btnred;
                        color: white;
                        border: none;
                        border-radius: 4px;
                        height: 2rem;
                        padding: 0 0.6rem;
                    }
                }
            }
        }
    }
}
.colleDiv{
    display: none;
    &.active{
        display: block;
    }
}
/*
 * offline——商品详情页
 */
.proTitle{
    padding: 1rem;
    background: white;
    flex-wrap: wrap;
    .absProcon{
        margin-top: 1rem;
        position: relative;
        background: #f3f3f3;
        width: 94%;
        padding: 0 0.6rem;
        height: 2.6rem; line-height: 2.6rem;
        border-radius: 6px;
        color: $red;
        i{
            position: absolute;
            top: -10px;
            left: 2rem;
            width: 0;height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #F3F3F3;
            display: block;
        }
    }
    em{
        color: $txtcolor;
        .iconfont{
            vertical-align: middle;
            margin-right: 0.4rem;
        }
        &.collected{
            color: $red;
        }
    }
}
.protitCon{
    p{
        color: $red;
        margin-bottom: 0.5rem;
        span{
            font-size: 1.8rem;
        }
        em{
            text-decoration: line-through;
            margin-left: 1rem;
        }
    }
}
/*
 * 商品详情-评价 tab切换样式
 */
.detailTab{
    display: flex;
    display: -moz-flex;
    display: -webkit-flex;
    text-align: center;
    background: white;
    li{
        flex: 1;
        line-height: 3rem;
        &.on{
            color: $btnred;
            border-bottom: 1px solid $btnred;
        }
    }
    li:last-child{
        border-right: none;
    }
}
/*
 * 满减——商品详情
 */
#bannerSlide{
    height: 20rem;
    img{
        height: 100%;
    }
}
.productPricebox{
    background: $red;
    display: flex;
    justify-content: space-between;
    padding: 1.6rem 1rem;
    .productPrice{
        color: #fff000;
        font-size: 2rem;
        span{
            font-size: 1.2rem;
            color: white;
            text-decoration: line-through;
            margin-left: 0.4rem;
        }
    }
    .activityTit{
        border: 1px solid #fff000;
        color: #FFF000;
        border-radius: 4px;
        padding: 0.2rem 1rem;
    }
}

.specBox{
    color: #323232;
    background: white;
    padding: 1rem 2rem;
    p{
        font-weight: bold;
        margin-bottom: 1rem;
    }
    .specList{
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid $borderColor;
        li{
            width: 30%;
            margin-left: 4%;
            margin-bottom: 1rem;
            border: 1px solid $borderColor;
            text-align: center;
            height: 2.6rem;
            line-height: 2.6rem;
            &.active{
                position: relative;
                border-color: #f23131;
                em{
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    z-index: 1;
                    background: url(../images/specIcon.png) no-repeat;
                    width: 17px; height: 17px;
                    display: block;
                }
            }
        }
        li:nth-child(3n+1){
            margin-left: 0;
        }
    }
}
.specNum{
    display: flex;
    justify-content: flex-end;
    input{
        border: 1px solid $borderColor;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        width: 30px;
        color: $bzTxt;
        background: none;
        outline: none;
        &.minusIpt{
            border-radius: 4px 0 0 4px;
            width: 20px;
            height: 2.2rem;
        }
        &.addIpt{
            border-radius: 0px 4px 4px 0;
            width: 20px;
            height: 2.2rem;
        }
    }
}
.proPingjia{
    background: white;
    padding-bottom: 1rem;
    .discussDiv:last-child{
        border-bottom: none;
    }
}
.discussP i{
    color: $red;
    margin: 0 0.4rem;
}
.moreDisscuss{
    border: 1px solid $btnred;
    border-radius: 4px;
    color: $btnred;
    width: 25%;
    margin: 1rem auto 0;
    text-align: center;
    a{
        color: $btnred;
    }
}
.footerBox a.proBuy{
    flex: 2;
    margin-right: 1rem;
    button{
        background: $btnred;
        color: white;
        width: 100%;
        border: none;
        border-radius: 4px;
        height: 100%;
    }
}

/*
 * 搜索页面
 */
.seachbox{
    @include flex;
    align-items: center;
    background: #EDEDED;
    border-radius: 20px;
    height: 3rem;
    margin: 1rem 2rem;
    padding: 0 1rem;
    div{
        @include flexcell;
        input{
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            margin: 0;
            background: none;
        }
    }
}
.search-tab{
    @include flex;
    align-items: center;
    text-align: center;
    background: white;
    line-height: 3rem;
    margin-bottom: 1px;
    li{
        @include flexcell;
        .aseDesc{
            position: relative;
            display: inline-block;
            vertical-align: middle;
            i{
                position: absolute;
            }
            .icon-down{
                top: 0;
                left: 0;
                z-index: 1;
            }
            .icon-up{
                bottom: 0;
                left: 0;
                z-index: 1;
            }
        }
    }
}
.mainBox{
    padding: 0 1rem;
    background: white;
}
.goodsBox{
    padding: 1rem 1rem;
    border-bottom: 1px solid $borderColor;
    .goodsImg{
        width: 100px;
        height: 100px;
        display: block;
        overflow: hidden;
        img{
            max-width: 100%;
            max-height: 100%;
        }
    }
    .goodsCon{
        @include flexcell;
        @include flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 1rem;
        height: 100px;
        .pj{
            background: $cf0;
            border-radius: 20px;
            font-size: 1rem;
            padding: 0 0.8rem;
            color: $smallTitle;
        }
        .price{
            color: $red;
        }
        .proBuy{
            background: $btnred;
            color: white;
            border-radius: 4px;
            padding:0 0.4rem;
        }
    }
}
